<template>
	<view class="page">
		<view class="div_box">
			<view class="div_box_mini">
				<view class="title_s">
					区块链查证信息概览</view>
				<view style="width: 96%;margin: auto;">
					<u-collapse @change="change" @close="close" @open="open" :value="['0']">
						<u-collapse-item name="0" title="产品数据">
							<view style="background-color: #ffffff;">
								<view class="mini_tilte">藏品名称</view>
								<view class="mini_text">亚长牛尊</view>
								<view class="mini_tilte">传作者</view>
								<view class="mini_text">西安博物馆</view>
								<view class="mini_tilte">发行方</view>
								<view class="mini_text">雷鹿(杭州)文创有限公司</view>
								<view class="mini_tilte">收藏者</view>
								<view class="mini_text">看看</view>
								<view class="mini_tilte">作品介绍</view>
								<view class="mini_text">三维还原殷墟唯一一件牛形青铜尊--亚长；
									牛尊，青铜古时被称为“吉金”，颜色本为
									金色.本次采用三维数字艺术复刻出亚长
									牛尊的原始模样，其周身精美纹饰清晰可
									见.让博物馆里不能触碰到的文物触手可
									及.亚长牛尊，2001年年出土于安阳市殷
									墟.通体遍饰神性动物纹样的牛尊，是一
									件祭礼的酒器，更是殷商时期人神沟通的
									媒介.栩栩如生的造型体现出工匠对水牛
									特征把握的精准性，也是当时殷墟气候的
									直接反映.
								</view>
							</view>
						</u-collapse-item>

						<u-collapse-item name="0" title="流转信息">
							<view style="background-color: #ffffff;">
								<u-steps current="2" direction="column" dot="true">
									<u-steps-item title="发放时间" desc="2022-1-29 12:00:38">
									</u-steps-item>
									<u-steps-item title="雷鹿(杭州)文创有限公司"></u-steps-item>
								</u-steps>

								<view class="mini_tilte">藏品哈希值</view>
								<u--textarea v-model="value1" placeholder="请输入内容" border="none"></u--textarea>
								<view class="mini_tilte">发行时间</view>
								<view  class="mini_text">2022-1-29 12:00:38
								</view>
								<view class="mini_tilte">哈希值</view>
								<u--textarea v-model="value1" placeholder="请输入内容" border="none"></u--textarea>

							</view>
						</u-collapse-item>
					</u-collapse>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1: '45f408b4455c44f414f62af67ca9d6cc07fed09bfd2499fc3c23d94acd376edf'
			}
		},
		methods: {

		}
	}
</script>

<style>
	.mini_text {
		font-weight: bold;
		margin: 10rpx 20rpx;
		font-size: 32rpx;
	}

	.mini_tilte {
		opacity: 0.8;
		margin: 20rpx 20rpx;
	}

	.title_s {
		margin-top: 50rpx;
		color: #007AFF;
		font-weight: bold;
		text-align: center;
		font-size: 42rpx;
		margin-bottom: 30rpx;
	}

	.div_box_mini {
		width: 94%;
		margin: auto;
		border: 1rpx solid rgba(46, 159, 207, 0.5);
		margin-top: 20rpx;
		padding-bottom: 30rpx;
	}

	.div_box {
		width: 94%;
		margin: auto;
		border: 1rpx solid rgba(206, 206, 206, 0.5);
		margin-top: 20rpx;
		padding-bottom: 30rpx;
	}

	.page {
		width: 100%;
		height: auto;
		background-color: #f4f7fe;
		position: absolute;
		color: #FFFFFF;
	}
</style>
